<template>
    <div id="main" ref="mainRef">
        <div class="content">
            <div :id="`dot-${index}`" v-for="(item, index) in pointArr" :key="`point-${index}`"
                :style="`top:${item.top}px;left:${item.left}px;width:${item.width}px;height:${item.height}px`"
                class="radius">
                <div :class="index == 0 ? 'radius2 bgColor1' : 'radius2'"
                    :style="`margin-top:5px;margin-left:5px;width:${item.width - 10}px;height:${item.height - 10}px`">
                </div>
                <div class="ipName">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            center: { x: 0, y: 0 },// 第一个圆的中心点坐标
            diameter: 100, // 圆的直径
            maxRound: 1, // 圆的圈数
            circlesInRing: 4,//每圈多少个
            circles: [],// 存储所有圆的中心点坐标
            distance: 110,//距离
            pointArr: [
                {
                    name: "192.168.1.1",
                    top: 0,
                    left: 0,
                    width: 50,
                    height: 50,
                },
                {
                    name: "192.168.1.2:8080",
                    top: 160,
                    left: 100,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8081",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8082",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8083",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8084",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8085",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8086",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },
                {
                    name: "192.168.1.2:8087",
                    top: 30,
                    left: 120,
                    width: 40,
                    height: 40,
                },

            ]
        }
    },
    methods: {
        // 中心点坐标（相较于滚动条外的 dom 边界）
        drawLineBetweenPoints(dotOne, dotTwo, thickness, color) {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            // 设置画布尺寸
            const width = this.$refs.mainRef.offsetWidth - 1;
            const height = this.$refs.mainRef.offsetHeight - 10;
            canvas.width = width;
            canvas.height = height;
            canvas.style.position = 'absolute';
            // 设置线条样式
            context.strokeStyle = color;
            context.lineWidth = thickness;
            // 绘制线条
            context.beginPath();
            context.moveTo(dotOne.offsetLeft + dotOne.offsetWidth / 2, dotOne.offsetTop + dotOne.offsetHeight / 2);
            context.lineTo(dotTwo.offsetLeft + dotTwo.offsetWidth / 2, dotTwo.offsetTop + dotTwo.offsetHeight / 2);
            context.stroke();
            // 将 canvas 元素添加到页面中
            const DOM = document.getElementById('main')
            DOM.appendChild(canvas);
        },
        // Dom位置计算函数
        async ballPosition(index) {
            let Dom = document.getElementById(`dot-${index}`)
            if (index == 0) {
                this.pointArr[0].top = this.$refs.mainRef.offsetHeight / 2 - Dom.offsetHeight / 2;
                this.pointArr[0].left = this.$refs.mainRef.offsetWidth / 2 - Dom.offsetWidth / 2;
                // 获取父节点中心点位置
                this.center.x = this.$refs.mainRef.offsetHeight / 2;
                this.center.y = this.$refs.mainRef.offsetWidth / 2;
                // 调用子节点中心点生成函数生成子节点离散数组
                console.log("_中心点__", this.center.x, this.center.y);
                // 计算有多少圈 
                this.maxRound = Math.ceil((this.pointArr.length - 1) / this.circlesInRing)
                this.getCircleCenterPoints();
            } else {
                console.log("中心点坐标", this.circles)
                this.pointArr[index].top = this.circles[index - 1].x;
                this.pointArr[index].left = this.circles[index - 1].y;
            }
        },
        // 子DOM中心点位置生成函数
        getCircleCenterPoints() {
            // 循环生成圆的中心点
            for (let i = 0; i < this.pointArr.length - 1; i++) {
                // 计算离散记录
                let _distance = this.distance
                console.log("_ (i % this.maxRound)__", (i % this.maxRound))
                _distance = _distance + 60 * (i % this.maxRound);

                // 计算每个圆之间的角度差 0.987系数无意义 增加一点角度优化样式用
                const angleDiff = 360 / (this.pointArr.length - 1) * 0.987;
                // 计算当前圆的角度
                const angle = (i * angleDiff * Math.PI) / 180;
                // 计算当前圆的中心点坐标  未优化：判断上下左右点位对center进行判定
                const x = this.center.x + (_distance) * Math.cos(angle);
                const y = this.center.y + (_distance) * Math.sin(angle);

                this.circles.push({
                    x: x,
                    y: y
                })
                // 此处可以增加通过对两点之间判定增加小圆球来提高
            }
        }
    },
    created() {

    },
    mounted() {
        const centerDot = document.getElementById('dot-0')
        this.pointArr.forEach((item, index) => {
            this.ballPosition(index).then(res => {
                console.log("__我是异步函数_")
                if (index > 0) { //跳过第一个节点
                    const childDom = document.getElementById(`dot-${index}`)
                    // 连线函数
                    this.drawLineBetweenPoints(centerDot, document.getElementById(`dot-${index}`), 4, '#D9B74C');
                }
            })

        });
    },
}
</script>

<style lang="less" scoped>
#main {
    width: 100%;
    height: 100%;
    background: #0B2338;

}

.content {
    position: relative;

    .radius {
        z-index: 100;
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(66deg, rgba(158, 104, 255, 1) 35%, rgba(24, 112, 230, 1) 100%);

        .radius2 {
            background: #132486;
            border-radius: 50%;
        }

        .bgColor1 {
            background: #162436;
        }

        .ipName {
            padding: 10px 0 0 0;
            text-align: center;
            color: #fff
        }
    }
}

.line-style {
    background: red;
    z-index: 10;
    height: 2px;
}
</style>